<template>
  <Page :show-nav-bar="false" v-slot:default="{contentClass}" :style="'background-color: #c34b4b; background: url(' + bgHome + ') no-repeat; background-size: 100% auto;min-height:45.625rem;'">
    <div :class="contentClass" >
<!--      <div :style="'background: url(' + topLogo + ') no-repeat; background-size: 100% auto;width:20rem; height:1.56rem; margin: 0 auto;'"></div>text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);-->
      <div>
        <div class="text-center bg-white p-2 rounded" style="width: 18.22rem; height: 12.22rem; margin: 0 auto; margin-top: 20rem; ">
          <div class="w-full rounded relative" style="background-image: linear-gradient(to right, #fbfcf8 , #fee3da);">
<!--            <div class="flex justify-center pt-4" style=" font-weight: 800;">-->
<!--              <van-icon name="passed" color="#e00515" size="2.5rem"/>-->
<!--            </div>-->
<!--            <div class="text-gray-500" style="font-weight: 600; font-size: 1.2rem; margin-top: .3rem;">-->
<!--              参与成功-->
<!--            </div>-->
<!--            <div class="text-sm text-gray-400 pt-4">-->
<!--              <span>电话号码：{{mask(item.mobile)}}</span>&nbsp;<span @click="onRefull"><van-icon name="edit" />重新填写</span>-->
<!--            </div>-->
<!--            <div class="border-t m-auto mt-2" style="background-image: linear-gradient(to right, #f5e3d9 , #f5dbc5); width: 90%;"></div>-->
<!--            <div class="text-center text-red-500 mt-5" style="font-weight: 900">-->
<!--              已获得入场资格-->
<!--            </div>-->
            <template v-if="item">
              <img v-if="item.degree==1" src="https://zdims-store.oss-cn-beijing.aliyuncs.com/2da1b6b2-3765-469e-91fc-3ad7b242db75.png" style="width:17.25rem"/>
              <img v-else-if="item.degree==2" src="https://zdims-store.oss-cn-beijing.aliyuncs.com/ed44af71-e575-43cc-9620-14214e1c96bd.png" style="width:17.25rem"/>
              <img v-else src="https://zdims-store.oss-cn-beijing.aliyuncs.com/ed44af71-e575-43cc-9620-14214e1c96bd.png" style="width:17.25rem"/>
              <div class="text-sm text-gray-100 pt-4 bottom-8 right-3 absolute">
                <span>{{channelName}}</span>
              </div>
              <div class="text-sm text-gray-400 pt-4 bottom-2 right-3 absolute">
                <span>号码：<span class="text-white">{{mask(item.mobile)}}</span></span>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </Page>
</template>

<script setup>
import bus from '../utils/bus'
import Page from "../components/Page.vue";
import XInput from '../components/XInput.vue'
import {computed, nextTick, onActivated, onMounted, ref} from "vue";
import apis from '../apis'
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import { ImagePreview } from 'vant';
import bgHome from '../assets/images/bg-home.jpg'
// import bgResult from '../assets/images/bg-result.png'
// import topLogo from '../assets/images/top-logo.png'

const store = useStore()
const router = useRouter()
const route = useRoute()
const channels = [{channel: 20, name: '金水院区'}, {channel: 21, name: '花园院区'}, {channel: 22, name: '桐柏院区'},
  {channel: 23, name: '亚星院区'}, {channel: 24, name: '蓝堡湾院区'}, {channel: 25, name: '天旺院区'},
  {channel: 26, name: '大学路院区'}, {channel: 27, name: '经开院区'}, {channel: 28, name: '高新院区'},
  {channel: 29, name: '管城院区'}, {channel: 30, name: '丰庆院区'}, {channel: 31, name: '医学院院区'},
  {channel: 32, name: '信阳院区'}, {channel: 33, name: '驻马店文明路院区'}, {channel: 34, name: '驻马店名洲牙科'},
  {channel: 35, name: '焦作院区'}, {channel: 36, name: '许昌院区'}, {channel: 37, name: '南阳院区'},
  {channel: 38, name: '新乡院区'}, {channel: 39, name: '周口院区'}, {channel: 40, name: '安阳院区'},
  {channel: 42, name: '鹤壁院区'}, {channel: 43, name: '南阳时代院区'}, {channel: 44, name: '汝南院区'},
  {channel: 45, name: '上街院区'}, {channel: 46, name: '平顶山院区'}]

const channelName = computed(() => {
  if (!item.value) return null
  let channel = channels.filter((o) => {
    return o.channel == item.value.channel
  })[0]
  return  channel ? '植得口腔' + channel.name : ''
})

const user = computed(() => store.state.user)

const activity = ref(null)

const item = ref({
  name: null,
  mobile: null,
})

const mask = (mobile) => {
  if (!mobile) return ""
  const reg = /^(\d{3})(\d{4})(\d{4})$/
  return mobile.replace(reg, "$1****$3")
}

const onRefull = () => {
  let query = route.query
  query.rewrite = 1
  router.replace({name: 'home', query})
}

onMounted(async() => {

  await apis.activity.show({
    form_id: route.query.form_id
  }).then(({data: result}) => {
    activity.value = result.data
  })

  // if (activity.value.now > '2024-07-22 00:00:00') {
  //   router.push({name: 'draw_result', query: {form_id: route.query.form_id}})
  //   return
  // }

  apis.activity.submitted({
    form_id: route.query.form_id
  }).then(({data: result}) => {
    if(result.data) {
      item.value = result.data
      // router.push({name: 'result', query: {form_id: route.query.form_id}})
      // window.location.href = 'http://localhost:3002/coupons/frame?id=1'
      // window.location.href = 'http://localhost:3000/mine/coupons'
      // if (result.data.verify == 1) {
      //   window.location.href = 'http://member.yishidekeji.com/mine/coupons'
      // }
    }
  })

})


const to = (url) => {
  window.location.href = url
}

</script>

<style scoped>

</style>